<template>
  <view class="container">
    <!-- 顶部控制栏 -->
    <view class="top-bar">
      <view class="title-section">
        <text class="title">扩散路径定位</text>
        <text class="subtitle">AI智能预测污染物扩散路径</text>
      </view>

      <view class="quick-controls">
        <picker @change="onFactoryChange" :value="selectedFactoryIndex" :range="factoryNames">
          <view class="factory-picker">
            <text class="factory-label">工厂:</text>
            <text class="factory-name">{{ selectedFactory ? selectedFactory.factoryName : '请选择' }}</text>
          </view>
        </picker>

        <button class="analyze-btn" @click="startDiffusionAnalysis" :disabled="!selectedFactory">
          开始分析
        </button>

        <button class="result-btn" @click="showResult" :disabled="!diffusionResult" v-if="diffusionResult">
          查看结果
        </button>
      </view>
    </view>

    <!-- 地图区域 -->
    <view class="map-section">
      <view class="map-container">
        <map id="diffusionMap" :longitude="mapCenter.longitude" :latitude="mapCenter.latitude" :scale="mapScale"
          :markers="mapMarkers" :circles="mapCircles" :polygons="mapPolygons" :polyline="mapPolylines" show-location
          class="map" @updated="onMapUpdated" @error="onMapError">
        </map>

        <!-- 地图控制按钮 -->
        <view class="map-controls">
          <view class="control-item" @click="zoomIn">
            <text>+</text>
          </view>
          <view class="control-item" @click="zoomOut">
            <text>-</text>
          </view>
          <view class="control-item" @click="resetMap">
            <text>🏠</text>
          </view>
          <view class="control-item" @click="refreshMap">
            <text>🔄</text>
          </view>
          <!-- 热力图切换按钮 -->
          <view class="control-item" @click="toggleHeatmap">
            <text>🔥</text>
          </view>
          <!-- 清除地图按钮 -->
          <view class="control-item" @click="clearMapVisualization">
            <text>🗑️</text>
          </view>
        </view>

        <!-- 图例 -->
        <view class="map-legend">
          <view class="legend-item">
            <view class="legend-color factory"></view>
            <text>工厂</text>
          </view>
          <view class="legend-item">
            <view class="legend-color impact"></view>
            <text>影响圆形</text>
          </view>
          <view class="legend-item">
            <view class="legend-color circle"></view>
            <text>影响圆圈</text>
          </view>
          <view class="legend-item">
            <view class="legend-color sensitive"></view>
            <text>敏感区域</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部参数面板 -->
    <view class="bottom-panel" :class="{ 'expanded': showParams }">
      <view class="panel-header" @click="toggleParams">
        <text class="panel-title">环境参数设置</text>
        <text class="toggle-icon">{{ showParams ? '▲' : '▼' }}</text>
      </view>

      <view class="panel-content" v-if="showParams">
        <view class="params-grid">
          <view class="param-item">
            <text class="param-label">风向</text>
            <picker @change="onWindDirectionChange" :value="windDirectionIndex" :range="windDirections">
              <view class="param-picker">
                {{ windDirections[windDirectionIndex] }}
              </view>
            </picker>
          </view>

          <view class="param-item">
            <text class="param-label">风速</text>
            <input class="param-input" type="number" v-model="windSpeed" placeholder="m/s" />
          </view>

          <view class="param-item">
            <text class="param-label">温度</text>
            <input class="param-input" type="number" v-model="temperature" placeholder="℃" />
          </view>

          <view class="param-item">
            <text class="param-label">湿度</text>
            <input class="param-input" type="number" v-model="humidity" placeholder="%" />
          </view>
        </view>

        <view class="action-buttons">
        </view>
      </view>
    </view>

    <!-- 分析结果弹框 -->
    <view class="result-modal" v-if="diffusionResult" @click="clearResult">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">分析结果</text>
          <text class="close-btn" @click="clearResult">×</text>
        </view>
        <view class="modal-body">
          <text class="result-text">{{ diffusionResult }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { pollutionApi } from '@/api/pollution.js'

export default {
  data() {
    return {
      factoryList: [],
      selectedFactory: null,
      selectedFactoryIndex: 0,
      windDirectionIndex: 0,
      windDirections: ['东北风', '东风', '东南风', '南风', '西南风', '西风', '西北风', '北风'],
      windSpeed: 3.5,
      temperature: 25.0,
      humidity: 65.0,
      diffusionResult: '',

      // 地图相关数据
      mapCenter: {
        longitude: 113.264385,
        latitude: 23.129163
      },
      mapScale: 12,
      mapMarkers: [],
      mapPolygons: [],
      mapCircles: [],
      mapPolylines: [],
      // 热力图数据
      heatmapData: [],
      showHeatmap: false,
      showLegend: true,
      showDebug: true,
      showParams: false,

      // 扩散分析结果数据
      diffusionData: {
        factoryLocation: null,
        diffusionPath: [],
        impactArea: [],
        sensitiveAreas: []
      }
    }
  },

  computed: {
    factoryNames() {
      return this.factoryList.map(factory => factory.factoryName)
    }
  },

  onLoad() {
    this.loadFactoryData()
    this.initMap()
  },

  methods: {
    // 加载工厂数据
    async loadFactoryData() {
      try {
        uni.showLoading({ title: '加载中...' })
        const res = await pollutionApi.getFactoryAnalysis()

        if (res.code === 200) {
          this.factoryList = res.obj || []
          if (this.factoryList.length > 0) {
            this.selectedFactory = this.factoryList[0]
            // 更新地图到第一个工厂位置
            this.updateMapToFactory()
          }
        } else {
          uni.showToast({
            title: res.msg || '加载失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 工厂选择变化
    onFactoryChange(e) {
      const index = e.detail.value
      this.selectedFactoryIndex = index
      this.selectedFactory = this.factoryList[index]

      // 更新地图中心到工厂位置
      this.updateMapToFactory()
    },

    // 风向变化
    onWindDirectionChange(e) {
      this.windDirectionIndex = e.detail.value
    },

    // 开始扩散分析
    async startDiffusionAnalysis() {
      if (!this.selectedFactory) {
        uni.showToast({
          title: '请选择工厂',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({ title: '分析中...' })

        const weatherData = {
          windDirection: this.windDirections[this.windDirectionIndex],
          windSpeed: parseFloat(this.windSpeed),
          temperature: parseFloat(this.temperature),
          humidity: parseFloat(this.humidity)
        }

        const res = await pollutionApi.predictDiffusionPath(this.selectedFactory.factoryId, weatherData)

        if (res.code === 200) {
          this.diffusionResult = res.obj.diffusionPath || '分析完成'

          // 使用后端返回的地理数据生成地图可视化
          if (res.obj.geoData) {
            this.generateMapFromBackendData(res.obj.geoData)
          } else {
            // 备用方案：使用前端计算
            this.generateMapVisualization(weatherData)
          }

          uni.showToast({
            title: '分析完成',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: '分析失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('分析失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 清除结果
    clearResult() {
      this.diffusionResult = ''
      // 不清除地图可视化，只关闭侧边栏
    },

    // 显示结果
    showResult() {
      if (this.diffusionResult) {
        // 侧边栏会自动显示，因为 diffusionResult 存在
        uni.showToast({
          title: '结果已显示',
          icon: 'success'
        })
      }
    },

    // 更新地图到工厂位置
    updateMapToFactory() {
      if (!this.selectedFactory) return

      // 直接使用API返回的经纬度坐标
      this.mapCenter = {
        longitude: this.selectedFactory.longitude,
        latitude: this.selectedFactory.latitude
      }

      // 添加工厂标记
      this.mapMarkers = [{
        id: 'factory',
        longitude: this.selectedFactory.longitude,
        latitude: this.selectedFactory.latitude,
        title: this.selectedFactory.factoryName,
        iconPath: '/static/icons/factory.svg',
        width: 30,
        height: 30,
        callout: {
          content: this.selectedFactory.factoryName,
          color: '#333',
          fontSize: 14,
          borderRadius: 5,
          bgColor: '#fff',
          padding: 5,
          display: 'ALWAYS'
        }
      }]

      // 保存工厂位置到扩散数据
      this.diffusionData.factoryLocation = {
        longitude: this.selectedFactory.longitude,
        latitude: this.selectedFactory.latitude,
        name: this.selectedFactory.factoryName
      }
    },

    // 切换热力图显示
    toggleHeatmap() {
      this.showHeatmap = !this.showHeatmap;

      if (this.showHeatmap && this.heatmapData.length > 0) {
        // 显示热力图时隐藏其他可视化元素
        this.mapCircles = [];
        this.mapPolygons = [];
      } else if (!this.showHeatmap) {
        // 隐藏热力图时恢复其他可视化元素
        // 重新生成可视化（这里简化处理，实际应该保存之前的状态）
        const weatherData = {
          windDirection: this.windDirections[this.windDirectionIndex],
          windSpeed: parseFloat(this.windSpeed),
          temperature: parseFloat(this.temperature),
          humidity: parseFloat(this.humidity)
        }
        this.generateMapVisualization(weatherData);
      }

      uni.showToast({
        title: this.showHeatmap ? '热力图已开启' : '热力图已关闭',
        icon: 'success'
      });
    },

    // 使用后端数据生成地图可视化
    generateMapFromBackendData(geoData) {
      console.log('使用后端地理数据:', geoData)

      // 更新地图中心到工厂位置
      const factoryLocation = geoData.factoryLocation
      this.mapCenter = {
        longitude: factoryLocation.longitude,
        latitude: factoryLocation.latitude
      }

      // 添加工厂标记
      this.mapMarkers = [{
        id: 'factory',
        longitude: factoryLocation.longitude,
        latitude: factoryLocation.latitude,
        title: factoryLocation.name,
        iconPath: '/static/icons/factory.svg',
        width: 30,
        height: 30,
        callout: {
          content: factoryLocation.name,
          color: '#333',
          fontSize: 14,
          borderRadius: 5,
          bgColor: '#fff',
          padding: 5,
          display: 'ALWAYS'
        }
      }]

      // 不再生成扩散射线
      this.mapPolylines = []

      // 生成影响范围 - 圆形区域
      if (geoData.impactArea && geoData.impactArea.circlePoints) {
        console.log('圆形数据:', geoData.impactArea.circlePoints)

        this.mapPolygons = [{
          points: geoData.impactArea.circlePoints.map(point => ({
            longitude: Number(point.longitude),
            latitude: Number(point.latitude)
          })),
          fillColor: 'rgba(231, 76, 60, 0.4)', // 红色填充
          strokeColor: 'rgba(231, 76, 60, 0.9)', // 红色边框
          strokeWidth: 6
        }]
        console.log('生成的圆形多边形:', this.mapPolygons)
      }

      // 生成圆形影响范围
      if (geoData.impactArea && geoData.impactArea.circle) {
        this.mapCircles = [{
          longitude: Number(geoData.impactArea.circle.longitude),
          latitude: Number(geoData.impactArea.circle.latitude),
          radius: Number(geoData.impactArea.circle.radius),
          strokeColor: geoData.impactArea.circle.color, // 改成 strokeColor
          fillColor: geoData.impactArea.circle.fillColor,
          strokeWidth: Number(geoData.impactArea.circle.strokeWidth)
        }]
        console.log('生成的圆圈:', this.mapCircles)
      } else if (geoData.impactArea) {
        // 备用方案：使用中心点和半径
        this.mapCircles = [{
          longitude: Number(geoData.impactArea.center.longitude),
          latitude: Number(geoData.impactArea.center.latitude),
          radius: Number(geoData.impactArea.radius || 1000),
          strokeColor: 'rgba(231, 76, 60, 0.9)', // 红色边框
          fillColor: 'rgba(231, 76, 60, 0.4)', // 红色填充
          strokeWidth: 6
        }]
        console.log('备用圆圈:', this.mapCircles)
      }

      // 生成热力图数据
      if (geoData.impactArea && geoData.impactArea.circlePoints) {
        // 基于圆形点生成热力图数据，中心点权重高，边缘权重低
        this.heatmapData = geoData.impactArea.circlePoints.map((point, index) => {
          // 计算点到中心的距离来确定权重
          const centerLng = geoData.impactArea.center.longitude;
          const centerLat = geoData.impactArea.center.latitude;
          const distance = Math.sqrt(
            Math.pow(point.longitude - centerLng, 2) +
            Math.pow(point.latitude - centerLat, 2)
          );

          // 权重与距离成反比，中心点权重最高
          const maxDistance = 0.01; // 假设最大距离
          const weight = Math.max(10, 100 * (1 - distance / maxDistance));

          return {
            longitude: Number(point.longitude),
            latitude: Number(point.latitude),
            count: weight
          };
        });

        // 添加中心点，权重最高
        this.heatmapData.push({
          longitude: Number(geoData.impactArea.center.longitude),
          latitude: Number(geoData.impactArea.center.latitude),
          count: 150
        });
      }

      // 生成敏感区域标记
      if (geoData.sensitiveAreas && geoData.sensitiveAreas.length > 0) {
        const sensitiveMarkers = geoData.sensitiveAreas.map((area, index) => ({
          id: `sensitive_${index}`,
          longitude: Number(area.longitude),
          latitude: Number(area.latitude),
          title: area.name,
          iconPath: `/static/icons/${area.type}.svg`,
          width: 25,
          height: 25,
          callout: {
            content: `${area.name} (${area.distance}m)`,
            color: '#333',
            fontSize: 12,
            borderRadius: 5,
            bgColor: '#fff',
            padding: 3,
            display: 'ALWAYS'
          }
        }))

        // 合并到现有标记中
        this.mapMarkers = [...this.mapMarkers, ...sensitiveMarkers]
      }
    },

    // 生成地图可视化数据（前端备用方案）
    generateMapVisualization(weatherData) {
      if (!this.diffusionData.factoryLocation) return

      const factoryLng = this.diffusionData.factoryLocation.longitude
      const factoryLat = this.diffusionData.factoryLocation.latitude

      // 不再生成扩散射线
      this.mapPolylines = []

      // 生成影响范围圆圈
      const impactRadius = this.calculateImpactRadius(weatherData.windSpeed)
      this.mapCircles = [{
        longitude: factoryLng,
        latitude: factoryLat,
        radius: impactRadius,
        strokeColor: 'rgba(231, 76, 60, 0.9)', // 红色边框
        fillColor: 'rgba(231, 76, 60, 0.4)', // 红色填充
        strokeWidth: 6
      }]

      // 生成圆形影响范围
      const circlePoints = []
      const radius = Math.min(weatherData.windSpeed * 500 / 111000, 1000 / 111000) // 限制最大半径

      for (let i = 0; i < 16; i++) {
        const angle = (2 * Math.PI * i) / 16
        const x = radius * Math.cos(angle)
        const y = radius * Math.sin(angle)

        circlePoints.push({
          longitude: factoryLng + x,
          latitude: factoryLat + y
        })
      }

      this.mapPolygons = [{
        points: circlePoints,
        fillColor: 'rgba(231, 76, 60, 0.4)', // 红色填充
        strokeColor: 'rgba(231, 76, 60, 0.9)', // 红色边框
        strokeWidth: 6
      }]

      // 生成热力图数据
      this.heatmapData = [];

      // 生成多个同心圆点用于热力图
      for (let r = 0; r <= radius; r += radius / 10) {
        const pointsInCircle = Math.max(8, Math.floor(16 * (1 - r / radius)));
        for (let i = 0; i < pointsInCircle; i++) {
          const angle = (2 * Math.PI * i) / pointsInCircle;
          const x = r * Math.cos(angle);
          const y = r * Math.sin(angle);

          // 权重与距离成反比，中心点权重最高
          const weight = Math.max(10, 100 * (1 - r / radius));

          this.heatmapData.push({
            longitude: factoryLng + x,
            latitude: factoryLat + y,
            count: weight
          });
        }
      }

      // 添加中心点，权重最高
      this.heatmapData.push({
        longitude: factoryLng,
        latitude: factoryLat,
        count: 150
      });

      // 生成敏感区域标记
      this.generateSensitiveAreaMarkers(factoryLng, factoryLat)
    },

    // 计算扩散路径
    calculateDiffusionPath(centerLng, centerLat, weatherData) {
      const points = []
      const windDirection = weatherData.windDirection
      const windSpeed = weatherData.windSpeed

      // 风向角度映射
      const directionAngles = {
        '北风': 0, '东北风': 45, '东风': 90, '东南风': 135,
        '南风': 180, '西南风': 225, '西风': 270, '西北风': 315
      }

      const angle = directionAngles[windDirection] || 0
      const radians = (angle * Math.PI) / 180

      // 根据风速计算扩散距离
      const maxDistance = windSpeed * 1000 // 每m/s对应1000米

      // 生成扩散路径点
      for (let i = 0; i <= 10; i++) {
        const distance = (maxDistance * i) / 10
        const lngOffset = distance * Math.sin(radians) / 111000 // 经度偏移
        const latOffset = distance * Math.cos(radians) / 111000 // 纬度偏移

        points.push({
          longitude: centerLng + lngOffset,
          latitude: centerLat + latOffset
        })
      }

      return points
    },

    // 计算影响半径
    calculateImpactRadius(windSpeed) {
      // 根据风速计算影响半径（米）- 限制最大半径
      return Math.min(windSpeed * 500, 1000) // 每m/s对应500米，最大1000米
    },

    // 生成敏感区域标记
    generateSensitiveAreaMarkers(centerLng, centerLat) {
      // 模拟敏感区域（学校、医院、居民区）
      const sensitiveAreas = [
        {
          type: 'school',
          name: '附近小学',
          longitude: centerLng + 0.01,
          latitude: centerLat + 0.01,
          iconPath: '/static/icons/school.png'
        },
        {
          type: 'hospital',
          name: '附近医院',
          longitude: centerLng - 0.01,
          latitude: centerLat + 0.01,
          iconPath: '/static/icons/hospital.png'
        },
        {
          type: 'residential',
          name: '居民区',
          longitude: centerLng + 0.005,
          latitude: centerLat - 0.01,
          iconPath: '/static/icons/residential.png'
        }
      ]

      // 添加敏感区域标记
      const sensitiveMarkers = sensitiveAreas.map((area, index) => ({
        id: `sensitive_${index}`,
        longitude: area.longitude,
        latitude: area.latitude,
        title: area.name,
        iconPath: area.iconPath,
        width: 25,
        height: 25,
        callout: {
          content: area.name,
          color: '#333',
          fontSize: 12,
          borderRadius: 5,
          bgColor: '#fff',
          padding: 3,
          display: 'ALWAYS'
        }
      }))

      // 合并到现有标记中
      this.mapMarkers = [...this.mapMarkers, ...sensitiveMarkers]
    },

    // 清除地图可视化
    clearMapVisualization() {
      this.mapPolylines = []
      this.mapCircles = []
      this.mapPolygons = []
      this.heatmapData = []
      // 保留工厂标记
      this.mapMarkers = this.mapMarkers.filter(marker => marker.id === 'factory')
    },

    // 地图控制方法
    zoomIn() {
      this.mapScale = Math.min(this.mapScale + 1, 18)
    },

    zoomOut() {
      this.mapScale = Math.max(this.mapScale - 1, 5)
    },

    resetMap() {
      this.mapScale = 12
      if (this.selectedFactory) {
        this.updateMapToFactory()
      }
    },

    refreshMap() {
      console.log('手动刷新地图...')

      if (this.selectedFactory) {
        this.updateMapToFactory()
        if (this.diffusionResult) {
          // 重新生成可视化
          const weatherData = {
            windDirection: this.windDirections[this.windDirectionIndex],
            windSpeed: parseFloat(this.windSpeed),
            temperature: parseFloat(this.temperature),
            humidity: parseFloat(this.humidity)
          }
          this.generateMapVisualization(weatherData)
        }
      }

      // 强制刷新地图组件
      this.$forceUpdate()

      uni.showToast({
        title: '地图已刷新',
        icon: 'success'
      })
    },

    // 初始化地图
    initMap() {
      console.log('初始化地图...')

      // 设置默认地图中心（广州）
      this.mapCenter = {
        longitude: 113.264385,
        latitude: 23.129163
      }

      // 添加默认标记
      this.mapMarkers = [{
        id: 'default',
        longitude: 113.264385,
        latitude: 23.129163,
        title: '默认位置',
        iconPath: '/static/icons/factory.svg',
        width: 30,
        height: 30,
        callout: {
          content: '请选择工厂开始分析',
          color: '#333',
          fontSize: 14,
          borderRadius: 5,
          bgColor: '#fff',
          padding: 5,
          display: 'ALWAYS'
        }
      }]

      console.log('地图初始化完成')
    },

    // 地图事件处理
    onMapUpdated(e) {
      console.log('地图更新:', e)
    },

    onMapError(e) {
      console.error('地图错误:', e)
      uni.showToast({
        title: '地图加载失败',
        icon: 'error'
      })
    },

    onRegionChange(e) {
      console.log('地图区域变化:', e)
    },

    // 切换参数面板
    toggleParams() {
      this.showParams = !this.showParams
    },


  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部控制栏 */
.top-bar {
  background: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.title-section {
  flex: 1;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 5rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #7f8c8d;
  display: block;
}

.quick-controls {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.factory-picker {
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 15rpx 20rpx;
  background: #f8f9fa;
  border-radius: 25rpx;
  border: 2rpx solid #e9ecef;
}

.factory-label {
  font-size: 24rpx;
  color: #666;
}

.factory-name {
  font-size: 26rpx;
  color: #2c3e50;
  font-weight: 500;
}

.analyze-btn {
  padding: 15rpx 30rpx;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #fff;
  border: none;
  border-radius: 25rpx;
  font-size: 26rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.analyze-btn:active {
  transform: scale(0.95);
}

.analyze-btn:disabled {
  background: #bdc3c7;
  color: #7f8c8d;
}

.result-btn {
  padding: 15rpx 30rpx;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: #fff;
  border: none;
  border-radius: 25rpx;
  font-size: 26rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.result-btn:active {
  transform: scale(0.95);
}

.result-btn:disabled {
  background: #bdc3c7;
  color: #7f8c8d;
}

/* 地图区域 */
.map-section {
  flex: 1;
  position: relative;
  background: #fff;
  margin: 0 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}

/* 地图控制按钮 */
.map-controls {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.control-item {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #2c3e50;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.control-item:active {
  transform: scale(0.9);
  background: #3498db;
  color: #fff;
}

/* 图例 */
.map-legend {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 22rpx;
  color: #2c3e50;
}

.legend-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.legend-color.factory {
  background: #e74c3c;
}

.legend-color.impact {
  background: rgba(231, 76, 60, 0.4);
}

.legend-color.circle {
  background: rgba(52, 152, 219, 0.3);
}

.legend-color.sensitive {
  background: #f39c12;
}

/* 底部参数面板 */
.bottom-panel {
  background: #fff;
  border-top: 1rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.panel-header {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-bottom: 1rpx solid #e9ecef;
  cursor: pointer;
}

.panel-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #2c3e50;
}

.toggle-icon {
  font-size: 24rpx;
  color: #7f8c8d;
  transition: transform 0.3s ease;
}

.panel-content {
  padding: 30rpx;
  background: #fff;
}

.params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.param-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.param-label {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

.param-picker {
  padding: 15rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border: 2rpx solid #e9ecef;
  font-size: 26rpx;
  color: #2c3e50;
  transition: all 0.3s ease;
}

.param-picker:active {
  border-color: #3498db;
  background: #fff;
}

.param-input {
  padding: 15rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border: 2rpx solid #e9ecef;
  font-size: 26rpx;
  color: #2c3e50;
  transition: all 0.3s ease;
}

.param-input:focus {
  border-color: #3498db;
  background: #fff;
}

.action-buttons {
  display: flex;
  justify-content: center;
}


/* 分析结果弹框 */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 600rpx;
  max-height: 80vh;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 30rpx;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  cursor: pointer;
  opacity: 0.8;
  padding: 10rpx;
}

.close-btn:active {
  opacity: 1;
}

.modal-body {
  padding: 30rpx;
  flex: 1;
  overflow-y: auto;
}

.result-text {
  font-size: 26rpx;
  line-height: 1.6;
  color: #2c3e50;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .top-bar {
    flex-direction: column;
    gap: 20rpx;
    align-items: stretch;
  }

  .quick-controls {
    justify-content: space-between;
  }

  .params-grid {
    grid-template-columns: 1fr;
  }

  .map-legend {
    flex-direction: column;
    gap: 10rpx;
  }
}
</style>